<template>
    <div class="today">
        <h3 class="title">今日服务人数/物资情况</h3>
        <div class="datas">
            <h3><span class="num">7,896</span><span>人次</span></h3>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .today{
        flex:1;
        padding:.3rem 1.4rem .5rem 1.8rem;
        .title{
            line-height:2.8rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:left;
            height:3.5rem;
            color: #00FFFF;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }
        .datas{
            height:6rem;
            width:100%;
            background-image: url('../../../../static/images/commonServer/todayBg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(90deg, rgba(5,43,63,0.8), rgba(0,255,255,0.2));
                z-index: 0;
            }
            h3{
                text-align:center;
                height:100%;
                line-height: 6rem;
                position: relative;
                z-index: 1;
                .num{
                    color: #FFFFFF;
                    font-size:2rem;
                    margin-right:1rem;
                    letter-spacing: .2rem;
                    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
                    font-family: 'Digital-7', sans-serif;
                }
                span:not(.num) {
                    color: #00FFFF;
                    font-size: 1.2rem;
                    opacity: 0.8;
                }
            }
        }
    }
</style>